<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<form action="1.php" method="post" id ='form'>
	<input type ="text" id="uname" value=""><span>请输入8~16的数字字母下划线</span><br /><br />
	<input type="text" id ="tet"><br /><br/>
	<select name="" id="sel">
		<option value="北京">ds</option>
		<option value="上单">fds</option>
		<option value="北河">fd</option>
		<option value="sd">f</option>
		<option value="fsd">fd</option>
	</select>>
	<input type ="submit" value="提交"><br/><br/>
	<input type="reset" value ="重置">
	</form>
	<script type="text/javascript">
	//获取元素
	var uname =document.getElementById('uname');

	var sel =document.getElementById('sel');

	var tet =document.getElementById('tet');

	var form =document.getElementById('form');

	var res =document.getElementById('res');

	//获取元素焦点
	uname.onfocus =function()
	{
		this.style.border ="solid 1px purple";
	}

	//失去焦点
	uname.onblur =function()
	{
		//获取值
		var v =this.value;

		//正在匹配
		var reg = /^\w{5,8}$/;

		if(reg.test(v)){
			this.style.border =' solid 2px red';

		}else {
			this.style.border ='solid 2px yellow';
		}
	}

	//当下拉框的值改变的时候触发
	sel.onchange =function()
	{
		alert('222');
	}

	tet.onselect =function()
	{
		alert('11');
	}

	tet.oncopy =function()
	{
		alert('33');
	}

	//form 提交事件
	form.onsubmit =function()
	{

		//阻止默认行为
		//return false;
	}

	// reset 重置事件
	// form.onreset =function()
	// {
	// 	return false;
	// }
	
















	</script>
</body>
</html>